<!--20210513  zaq  修改界面显示-->
<!--20210526  zaq  增加本月总收入支出图表-->
<!--20210604  zaq  增加月收支、说说日程数量统计-->

<template xmlns:el-col="http://www.w3.org/1999/html">
  <!--  主页界面-->
  <div class="home" style="padding: 0;margin: 0;width: 100%">
    <el-row type="flex" style="height: 2em;padding: 5px" justify="center">
      <el-col>
        <span style="color: white;text-align: center;">现在是{{nowDate}}</span>
<!--              <el-divider></el-divider>-->
      </el-col>
    </el-row>
    <el-row>
      <div>
        <el-form inline style="padding: 0;margin: 0;width: 100%;height: 2.5em">
          <el-form-item>
            <el-date-picker
                v-model="myMonth"
                type="month"
                placeholder="选择月">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button @click="getSummary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-row>
    <el-row :gutter="20"
            style="height: 40em;background-color: rgba(0,0,0,0.1);padding: 0;margin: 0;width: 100%"
    >

      <el-col :span="12" style="height: 39em;width: 100%">
        <!--      当日收支汇总-->
<!--        <div class="total" style="width: 100%">-->
<!--          <span style="color: #8c939d">今日支出</span>-->
<!--          <span style="color: rosybrown">{{getMoney}}</span>-->
<!--          <span style="color: #8c939d">元，收入</span>-->
<!--          <span style="color: #42b983">{{pushMoney}}</span>-->
<!--          <span style="color: #8c939d">元</span>-->
<!--        </div>-->
        <div style="width: 1000px;padding: 0;margin: 0;height: 250px">
          <div class="summaryInput" id="summaryInput"
               style="height: 400px;width: 500px;float:left"></div>

          <div class="summaryOutput" id="summaryOutput"
               style="height: 400px;width: 500px;float: right"></div>
        </div>

        <div id="selectMonth" style="height: 400px;width:1000px;;float: left"></div>


<!--        有话要说-->
<!--        <div class="text" style="text-align: left;color: #c0ccda;height: 100%">-->
<!--          <el-header style="background-color: rgba(0,0,0,0);padding: 0;margin: 0">-->
<!--            <el-button-->
<!--                style="background-color: rgba(0,254,254,0);width: 100%;color: #c0ccda">-->
<!--              有话要说</el-button>-->
<!--          </el-header>-->
<!--          <div v-for="text in texts">-->
<!--            <el-divider></el-divider>-->
<!--              <span>{{text.text}}</span>-->
<!--            <br>-->
<!--            <div style="text-align: right">-->
<!--              <span >{{text.date}}</span>-->
<!--            </div>-->



<!--          </div>-->
<!--        </div>-->


      </el-col>

<!--      <el-divider direction="vertical" style="height: 40em"></el-divider>-->


<!--      <el-col :span="8" >-->
<!--        &lt;!&ndash;      当日安排&ndash;&gt;-->
<!--        &lt;!&ndash;      当日日程汇总&ndash;&gt;-->
<!--        <div class="total" style="width: 100%">-->
<!--          <span style="color: #8c939d">今日有</span>-->
<!--          <span style="color: rosybrown">{{totalNum}}</span>-->
<!--          <span style="color: #8c939d">件事需要注意，待办事项</span>-->
<!--          <span style="color: #42b983">{{selectNum}}</span>-->
<!--          <span style="color: #8c939d">件</span>-->
<!--        </div>-->
<!--        <div class="calendar">-->
<!--          <el-header style="background-color: rgba(0,0,0,0);padding: 0;margin: 0">-->
<!--            <el-button-->
<!--                style="background-color: rgba(0,254,254,0);width: 100%;color: #c0ccda">-->
<!--              新建日程</el-button>-->
<!--          </el-header>-->

<!--        </div>-->

<!--      </el-col>-->


    </el-row>


  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import moment from "moment";
import {selectAllSummary_input_0000,selectAllSummary_output_0000} from "../api";
import {getMonth_0000} from "../api";

export default {
    name: "Home",
  mounted() {
    let nowDate = new Date()
    let date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      date: nowDate.getDate()
    }
    this.nowDate=date.year + '年' + date.month + '月' + date.date + '日'
    this.getSummaryInput()
    this.getSummaryOutput()
    this.getSummary()
  },
  data(){
      return{
        myMonth:new Date(),
        totalNum:'0',
        selectNum:'0',
        texts:[
          {
            text:'hello world!',
            date:'2021-5-13',
          },
          {
            text:'hello world!',
            date:'2021-5-13',
          },
          {
            text:'hello world!',
            date:'2021-5-13',
          },
          {
            text:'hello world!',
            date:'2021-5-13',
          },
          {
            text:'hello world!',
            date:'2021-5-13',
          },
          {
            text:'hello world!',
            date:'2021-5-13',
          },
        ],
        getMoney:'0',
        pushMoney:'0',
        nowDate:'',
        input:'',
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },
  methods:{
    setMonth(body){
      var myChart = this.$echarts.init(document.getElementById("selectMonth"),'dark');

      var myX=[]
      var myText=[]
      var myCalendar=[]
      var myIn=[]
      var myOut=[]
      for (var i = 0; i < body.length; i++) {
        myX.push([
          body[i].date,
        ])
        myText.push(body[i].text)
        myCalendar.push(body[i].calendar)
        myIn.push(body[i].in)
        myOut.push(body[i].out)
      }
      var option = {
        title: {
          text: '月信息统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['日程数量', '说说数量', '收入金额', '支出金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: myX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '日程数量',
            type: 'line',
            // stack: '总量',
            data: myCalendar
          },
          {
            name: '说说数量',
            type: 'line',
            // stack: '总量',
            data: myText
          },
          {
            name: '收入金额',
            type: 'line',
            // stack: '总量',
            data: myIn
          },
          {
            name: '支出金额',
            type: 'line',
            // stack: '总量',
            data: myOut
          }
        ]
      };
      myChart.setOption(option,true)
    },
    getSummary() {
      const _this=this
      var uDate=moment(this.myMonth).format('yyyyMM');

      var body={
        cDate:parseInt(uDate)*100+31,
        cStart:moment(this.myMonth).format('yyyy-MM-DD'),
        uId:sessionStorage.getItem("uId"),}

      getMonth_0000(body).then(resp=>{
        _this.setMonth(resp)
        _this.getSummaryInput()
        _this.getSummaryOutput()
      }).catch(err=>{
        this.$message({
          type: 'error',
          message: `获得图表接口调用失败:`+err
        });
      })

    },
    getSummaryOutput() {
      const _this=this
      var uDate=moment(this.myMonth).format('yyyyMM');

      var body={
        startTime:parseInt(uDate)*100,
        endTime:parseInt(uDate)*100+31,
        code:-1,
        note:"",
        sId:1,
        sNumber: '25.2',
        sFlag: '1',
        sDate: '20210302',
        sKind:'',
        sPay:'',
        sText:'',
        delete:'',
        uId:sessionStorage.getItem("uId"),
        bId:null,
        gId:null,
        update:false,}

      selectAllSummary_output_0000(body).then(resp=>{
        console.log('Sumary:'+resp)
        var myChart = _this.$echarts.init(document.getElementById("summaryOutput"));

        var option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data:resp
            }
          ]
        };
        myChart.setOption(option,true)
      }).catch(err=>{
        this.$message({
          type: 'error',
          message: `获得月收入图表接口调用失败:`+err
        });
      })

    },
    getSummaryInput() {
        const _this=this
        var uDate=moment(this.myMonth).format('yyyyMM');

        var body={
          startTime:parseInt(uDate)*100,
          endTime:parseInt(uDate)*100+31,
          code:-1,
          note:"",
          sId:1,
          sNumber: '25.2',
          sFlag: '1',
          sDate: '20210302',
          sKind:'',
          sPay:'',
          sText:'',
          delete:'',
          uId:sessionStorage.getItem("uId"),
          bId:null,
          gId:null,
          update:false,}

        selectAllSummary_input_0000(body).then(resp=>{
          console.log('Sumary:'+resp)
          var myChart = _this.$echarts.init(document.getElementById("summaryInput"));

          var option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data:resp
              }
            ]
          };
          myChart.setOption(option,true)
        }).catch(err=>{
          this.$message({
            type: 'error',
            message: `获得月收入图表接口调用失败:`+err
          });
        })

      }
  }
}
</script>
